<template>
  <div class="margin_top">
    <el-card class="w">
      <el-form :model="ruleform" hide-required-asterisk :rules="rules" ref="ruleFormref" label-width="100px" style="width:500px"> 
        <el-page-header @back="goBack" content="设置个人信息"></el-page-header>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="margin_top">
            <el-tab-pane label="基本信息" name="first">
                    <el-form-item label="用户名" prop="username">
                        <el-input disabled v-model="ruleform.username" ></el-input>
                    </el-form-item>
                    <el-form-item label="昵称"  prop="nikiname">
                        <el-input v-model="ruleform.nikiname"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleform.email"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="margin-left:100px">保存</el-button>
            </el-tab-pane>
            <el-tab-pane label="设置头像" name="second">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:3000/form/forms/upload"
                    :show-file-list="false"
                    :on-preview='handlepreview'
                    :headers='httpheaders'
                    :before-upload='qianpuload'
                    :on-success="handleAvatarSuccess">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="third">修改密码</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'personal',
  data(){
     var checkage=(rule,value,callback)=>{
          var reg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
          if(reg.test(value)){
              return callback()
          }
          callback(new Error('请输入合法的邮箱'))
      }
      return{
        //   默认显示
        activeName:'first',
        // 基本信息
        ruleform:{
              username:'',
              nikiname:'',
              email:'',
        },
        imageUrl:'',
        // 基本信息验证规则
                // 上传图片的请求头
        httpheaders:{
            Authorization:JSON.parse(localStorage.getItem('user')).id++
        },
        rules:{
            username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:2,max:16,message:'长度在2-16个字符',trigger:'blur'}
            ],
            nikiname:[
                {required:true,message:'请输入昵称',trigger:'blur'},
                {min:1,max:12,message:'长度在1-12个字符',trigger:'blur'}
            ],
            email:[
                {validator:checkage,trigger:'blur'},
            ]
        }
      }
  },
  methods:{
    //   点击返回
    goBack(){
        this.$router.go(-1)
    },
    // 被选中的tab
    handleClick(a,b){
        // console.log(a,b)
    },
    // 头像上传成功
    handleAvatarSuccess(res){
        // console.log(res)
        this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片预览
    handlepreview(file){
        console.log(file)
    },
    qianpuload(file){
        this.imageUrl=file.name
        // console.log(file)
        // this.$axios.get('/form/forms',{params:{
        //     file:file.name
        // }}).then(res=>{
        //     // console.log(res)
        // })
    }
  },
  created(){
    this.ruleform=JSON.parse(localStorage.getItem('user'))
  }
}
</script>

<style lang="less" scoped>
.w{
    width: 1000px;
    margin: 0 auto;
}
.margin_top{
    margin-top: 30px;
}
.avatar-uploader{
    width:100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    line-height: 100px;
}
</style>
